<template>
    <div>
        <div class="title">
            <title-dom title="用户登录"></title-dom>
        </div>
        <div class="tabs">
            <tabs-dom :tab="tabs"></tabs-dom>
        </div>
        <div class="form-groups">
            <div class="form-group">
                <div class="ipt-title">
                    <span class="input-title">手机号/邮箱</span>
                    <span class="forgotPassword"></span>
                </div>
                <my-input type1="text" @message="(e) => { form.account = e }" value="请输入手机号/邮箱地址" class="myinput"
                    :rule="rulesPhone" :error="accountError" :values="form.account"></my-input>
            </div>
            <div class="form-group">
                <div class="ipt-title">
                    <span class="input-title">密码</span>
                    <span class="forgotPassword" @click="$router.push('/changePassword')">忘记密码</span>
                </div>
                <my-input type1="password" value="请输入密码" class="myinput" :rule="rulesPassword" :showPassword="true"
                    :error="pwdError" @message="(e) => { form.pwd = e }" :values="form.pwd"></my-input>
            </div>
        </div>
        <el-button class="login" @click="login">登录</el-button>
        <p class="register mouse-active" @click="$router.push('/register')">立即注册</p>

        <div class="form-set">
            <div class="checkbox-group">
                <check-box @message="(e) => { automaticLogin = e }" :value="1" :history="automaticLogin"></check-box>
                <span class="checkbox-text">自动登录</span>
            </div>
            <div class="checkbox-group">
                <check-box @message="(e) => { hasTrue = e }" :value="2"></check-box>
                <span class="checkbox-text">同意使用<i class="privacy">隐私条款</i></span>
            </div>
        </div>

        <div class="other-type">
            <other-login></other-login>
        </div>
    </div>
</template>

<script>
import myInput from '@/components/common/account/components/inputRule.vue';
import checkBox from "@/components/common/account/components/checkBox.vue";
import otherLogin from "@/components/common/account/components/otherLogin.vue";
import titleDom from "@/components/common/account/components/title.vue";
import tabsDom from "@/components/common/account/components/tabs.vue";
export default {
    components: {
        myInput,
        checkBox,
        otherLogin,
        titleDom,
        tabsDom
    },
    data() {
        return {
            tabs: [{
                name: "账号登录",
                to: "/login/passwordLogin"
            },
            {
                name: "验证码登录",
                to: "/login/smsVerificationLogin"
            }
            ],
            automaticLogin: this.$store.state.automaticLogin,
            hasTrue: false,
            form: {
                account: "",
                pwd: ""
            },
            accountError: "",
            pwdError: ""
        }
    },
    methods: {
        login() {
            if (!this.hasTrue) {
                this.$toast('请先阅读并同意使用隐私条款', 2000, 'normal');
            } else if (!this.form.account) {
                this.accountError = '手机号/邮箱不能为空';
                return;
            } else if (!this.form.pwd) {
                this.pwdError = '密码不能为空';
                return;
            } else {
                this.$store.dispatch('passwordLogins', this.form);
            }

        }
    },
    computed: {
        rulesPhone() {
            return {
                trigger: 'blur',
                max: 17,
                num_message: '请输入11位的手机号',
                req_message: '手机号/邮箱不能为空',
                required: true,
                reg: /(^[\w.\-]+@(?:[a-z0-9]+(?:-[a-z0-9]+)*\.)+[a-z]{2,3}$)|(^1[3|4|5|6|7|8|9]\d{9}$)/,
                reg_message: '手机号/邮箱格式错误'
            }
        },
        rulesPassword() {
            return {
                trigger: 'blur',
                min: 6,
                max: 12,
                num_message: '格式错误,长度为6-12个字符,需含大小写字母、数字，不允许空格和中文',
                req_message: '密码不能为空',
                required: true,
                reg: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{6,12}$/,
                reg_message: '格式错误,长度为6-12个字符,需含大小写字母、数字，不允许空格和中文'
            }
        }
    },
    watch: {
        automaticLogin(newVal, oldVal) {
            console.log(newVal);
            this.$store.commit('setAutomaticLogin', newVal)
        }
    }
}
</script>

<style lang="less" scoped>
.tabs {
    margin-top: 1.07rem;
    margin-bottom: 1.6rem;
}

.title {
    margin-top: 1.6rem;
}

.form-groups {
    width: 16rem;
    height: 8.32rem;
}

.input-title {
    height: 0.96rem;
    font-size: 0.59rem;
    font-family: 'IdeaFonts-DianHei-DEJ, IdeaFonts-DianHei';
    font-weight: normal;
    color: #212121;
    line-height: 0.96rem;
}

.forgotPassword {
    height: 0.96rem;
    font-size: 0.59rem;
    font-family: 'IdeaFonts-DianHei-DEJ, IdeaFonts-DianHei';
    font-weight: normal;
    color: #68656C;
    line-height: 0.96rem;
    text-decoration: underline;
}

.ipt-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.form-group {
    margin-bottom: 0.53rem;
}

.login {
    width: 16rem;
    height: 1.92rem;
    background: linear-gradient(315deg, rgba(38, 87, 255, 0.75) 0%, rgba(159, 34, 255, 0.75) 100%);
    border-radius: 0.21rem;
    backdrop-filter: blur(10px);

    :deep(span) {
        height: 0.96rem;
        font-size: 0.64rem;
        font-family: 'IdeaFonts-DianHei-CEJ, IdeaFonts-DianHei';
        font-weight: normal;
        color: #FFFFFF;
        line-height: 0.96rem;
    }
}

.register {
    height: 0.96rem;
    font-size: 0.59rem;
    font-family: 'IdeaFonts-DianHei-DEJ, IdeaFonts-DianHei';
    font-weight: normal;
    color: #7709CC;
    line-height: 0.96rem;
    text-align: center;
    margin-top: 0.53rem;
}

.form-set {
    width: 16rem;
    margin-top: 0.59rem;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .checkbox-group {
        display: flex;
        align-items: center;

        .checkbox-text {
            margin-left: 0.43rem;
            height: 0.96rem;
            font-size: 0.59rem;
            font-family: 'IdeaFonts-DianHei-DEJ, IdeaFonts-DianHei';
            font-weight: normal;
            color: #212121;
            line-height: 0.96rem;
        }

        .privacy {
            font-style: normal;
            color: #7709CC;
            text-decoration: underline;
        }
    }
}

.other-type {
    margin-top: 0.85rem;
}
</style>